<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商家中心 - 灵犀智苑</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }

        :root {
            --primary: #4361ee;
            --primary-light: #5e72e4;
            --secondary: #4cc9f0;
            --accent: #e67e22;
            --light: #ecf0f1;
            --dark: #34495e;
            --darker: #2c3e50;
            --text: #2c3e50;
            --text-light: #7f8c8d;
            --glass: rgba(255, 255, 255, 0.2);
            --border: rgba(255, 255, 255, 0.3);
            --shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
            --transition: all 0.3s ease;
            --success: #28a745;
            --warning: #ffc107;
            --info: #17a2b8;
            --danger: #dc3545;
        }

        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #e4e7eb 100%);
            color: var(--text);
            min-height: 100vh;
            overflow-x: hidden;
        }

        .background-blur {
            position: fixed;
            top: -50px;
            left: -50px;
            right: -50px;
            bottom: -50px;
            background: url('');
            filter: blur(40px);
            z-index: -1;
        }

        /* 玻璃拟态效果 */
        .glass {
            background: var(--glass);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid var(--border);
            box-shadow: var(--shadow);
            border-radius: 20px;
            overflow: hidden;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 2rem;
        }

        /* 导航栏 */
        header {
            padding: 1rem 0;
        }

        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 2rem;
            position: relative;
            z-index: 100;
        }

        .logo {
            display: flex;
            align-items: center;
            font-size: 1.8rem;
            font-weight: 700;
            background: linear-gradient(90deg, var(--primary), var(--accent));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .logo-icon {
            margin-right: 10px;
            animation: float 3s ease-in-out infinite;
        }

        .nav-links {
            list-style: none;
            display: flex;
            gap: 2rem;
        }

        .nav-links a {
            color: var(--darker);
            text-decoration: none;
            font-weight: 500;
            padding: 8px 0;
            position: relative;
            transition: var(--transition);
        }

        .nav-links a:after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 0;
            left: 0;
            background: var(--primary);
            transition: var(--transition);
        }

        .nav-links a:hover:after,
        .nav-links a.active:after {
            width: 100%;
        }

        .nav-links a.active {
            color: var(--primary);
        }

        .cta-buttons {
            display: flex;
            gap: 1rem;
            align-items: center;
        }

        .btn {
            padding: 0.7rem 1.5rem;
            border-radius: 12px;
            border: none;
            cursor: pointer;
            font-weight: 500;
            transition: var(--transition);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
        }

        /* 主内容区域 */
        main {
            padding: 4rem 0;
        }

        .dashboard-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2.5rem;
        }

        .dashboard-title {
            font-size: 2.5rem;
            font-weight: 700;
            background: linear-gradient(90deg, var(--primary), var(--accent));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* 页面内容区 */
        .page-content {
            display: none;
            animation: fadeIn 0.5s ease;
        }

        .page-content.active {
            display: block;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* 订单管理表格样式 */
        .table-container {
            background: var(--glass);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: var(--shadow);
            padding: 1.5rem;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 1rem;
        }

        th, td {
            padding: 1.25rem 1.5rem;
            text-align: left;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        }

        thead {
            background: rgba(67, 97, 238, 0.1);
        }

        th {
            font-weight: 600;
            color: var(--primary);
        }

        tbody tr {
            transition: var(--transition);
        }

        tbody tr:hover {
            background: rgba(67, 97, 238, 0.05);
        }

        .status-badge {
            display: inline-block;
            padding: 0.35rem 0.8rem;
            border-radius: 2rem;
            font-size: 0.85rem;
            font-weight: 600;
        }

        .status-pending {
            background: rgba(255, 193, 7, 0.15);
            color: #b38700;
        }

        .status-completed {
            background: rgba(40, 167, 69, 0.15);
            color: #1a7d38;
        }

        .status-shipped {
            background: rgba(0, 123, 255, 0.15);
            color: #0062cc;
        }

        .status-cancelled {
            background: rgba(220, 53, 69, 0.15);
            color: #bd2130;
        }

        .action-btn {
            background: var(--primary);
            color: white;
            border: none;
            padding: 0.5rem 1.25rem;
            border-radius: 0.5rem;
            cursor: pointer;
            font-weight: 500;
            transition: var(--transition);
        }

        .action-btn:hover {
            background: var(--primary-light);
            transform: translateY(-2px);
        }

        /* 商品管理网格样式 */
        .product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 2rem;
            margin-top: 1.5rem;
        }

        .product-card {
            background: var(--glass);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: var(--transition);
            cursor: pointer;
        }

        .product-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 40px rgba(31, 38, 135, 0.2);
        }

        .product-image {
            height: 200px;
            overflow: hidden;
        }

        .product-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .product-card:hover .product-image img {
            transform: scale(1.05);
        }

        .product-info {
            padding: 1.5rem;
        }

        .product-name {
            font-size: 1.25rem;
            margin-bottom: 0.75rem;
            color: var(--darker);
        }

        .product-price {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 0.5rem;
        }

        .product-stock {
            color: var(--text-light);
            font-size: 0.9rem;
        }

        /* 统计卡片 */
        .stats-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .stat-card {
            padding: 1.5rem;
            border-radius: 20px;
            display: flex;
            flex-direction: column;
            transition: var(--transition);
        }

        .stat-card:hover {
            transform: translateY(-5px);
        }

        .stat-value {
            font-size: 2.2rem;
            font-weight: 700;
            margin: 0.5rem 0;
        }

        .stat-label {
            font-size: 1rem;
            color: var(--text-light);
        }

        .stat-card:nth-child(1) { background: rgba(67, 97, 238, 0.15); }
        .stat-card:nth-child(2) { background: rgba(76, 201, 240, 0.15); }
        .stat-card:nth-child(3) { background: rgba(230, 126, 34, 0.15); }
        .stat-card:nth-child(4) { background: rgba(40, 167, 69, 0.15); }

        /* 页脚 */
        footer {
            text-align: center;
            padding: 2rem;
            margin-top: 3rem;
            color: var(--text-light);
            font-size: 0.9rem;
        }

        /* 模态框样式 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(5px);
            z-index: 1000;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
            overflow-y: auto;
        }

        .modal.active {
            display: flex;
            opacity: 1;
        }

        .modal-content {
            background: white;
            border-radius: 20px;
            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
            width: 90%;
            max-width: 800px;
            padding: 2.5rem;
            position: relative;
            transform: translateY(20px);
            transition: transform 0.3s ease;
            max-height: 90vh;
            overflow-y: auto;
        }

        .modal.active .modal-content {
            transform: translateY(0);
        }

        .close-modal {
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 1.5rem;
            cursor: pointer;
            color: var(--text-light);
            transition: var(--transition);
        }

        .close-modal:hover {
            color: var(--primary);
            transform: rotate(90deg);
        }

        .modal-title {
            font-size: 1.8rem;
            margin-bottom: 1.5rem;
            color: var(--primary);
            text-align: center;
        }

        .form-group {
            margin-bottom: 1.5rem;
            position: relative;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            color: var(--darker);
        }

        .form-control {
            width: 100%;
            padding: 0.8rem 1rem;
            border: 1px solid #ddd;
            border-radius: 10px;
            font-size: 1rem;
            transition: var(--transition);
        }

        .form-control:focus {
            border-color: var(--primary);
            outline: none;
            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2);
        }

        .btn-submit {
            background: linear-gradient(90deg, var(--primary), var(--accent));
            color: white;
            padding: 1rem 2rem;
            border: none;
            border-radius: 10px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            width: 100%;
            transition: var(--transition);
            margin-top: 1rem;
        }

        .btn-submit:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(67, 97, 238, 0.4);
        }

        /* 错误提示 */
        .error-message {
            color: var(--danger);
            font-size: 0.85rem;
            margin-top: 0.3rem;
            display: none;
        }

        /* 预览模态框样式 */
        .preview-container {
            display: flex;
            gap: 2rem;
        }

        .preview-image {
            flex: 1;
            border-radius: 15px;
            overflow: hidden;
            height: 300px;
        }

        .preview-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .preview-details {
            flex: 1;
        }

        .preview-title {
            font-size: 1.8rem;
            margin-bottom: 1rem;
            color: var(--primary);
        }

        .preview-price {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 1rem;
        }

        .preview-meta {
            display: flex;
            gap: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .preview-meta-item {
            display: flex;
            flex-direction: column;
        }

        .preview-label {
            font-size: 0.9rem;
            color: var(--text-light);
            margin-bottom: 0.3rem;
        }

        .preview-value {
            font-size: 1.1rem;
            font-weight: 600;
        }

        .preview-description {
            line-height: 1.6;
            color: var(--darker);
        }

        /* 图片上传区域 */
        .image-upload-container {
            border: 2px dashed #ddd;
            border-radius: 12px;
            padding: 2rem;
            text-align: center;
            cursor: pointer;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }

        .image-upload-container:hover {
            border-color: var(--primary);
            background: rgba(67, 97, 238, 0.05);
        }

        .image-upload-container i {
            font-size: 3rem;
            color: var(--primary-light);
            margin-bottom: 1rem;
        }

        .image-upload-container p {
            color: var(--text-light);
            margin-bottom: 0.5rem;
        }

        .image-upload-container small {
            color: var(--text-light);
            font-size: 0.9rem;
        }

        #image-preview {
            max-width: 100%;
            max-height: 200px;
            margin-top: 1rem;
            border-radius: 10px;
            display: none;
        }

        #file-input {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            opacity: 0;
            cursor: pointer;
        }

        /* 动画 */
        @keyframes float {
            0% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(-15px);
            }
            100% {
                transform: translateY(0px);
            }
        }

        /* 响应式设计 */
        @media (max-width: 1024px) {
            .navbar {
                flex-direction: column;
                gap: 1.5rem;
            }
            
            .nav-links {
                flex-wrap: wrap;
                justify-content: center;
            }
            
            .preview-container {
                flex-direction: column;
            }
        }

        @media (max-width: 768px) {
            .dashboard-title {
                font-size: 2rem;
            }
            
            th, td {
                padding: 0.75rem;
            }
            
            .product-grid {
                grid-template-columns: 1fr;
            }
            
            .stats-container {
                grid-template-columns: 1fr;
            }
            
            .modal-content {
                padding: 1.5rem;
            }
        }
    </style>
</head>
<body>
    <div class="background-blur"></div>
    
    <header>
        <nav class="navbar glass">
            <div class="logo">
                <span class="logo-icon">✨</span>
                <span>灵犀智苑 · 商家中心</span>
            </div>
            <ul class="nav-links">
                <li><a href="#" class="active" data-page="orders-page">订单管理</a></li>
                <li><a href="#" data-page="products-page">商品管理</a></li>
            </ul>
            <div class="cta-buttons">
                <i class="fas fa-user-circle" style="font-size: 1.8rem; color: var(--accent);"></i>
                <span style="margin-left: 10px; font-weight: 500;">商家管理员</span>
            </div>
        </nav>
    </header>

    <main class="container">
        <!-- 订单管理页面 -->
        <div id="orders-page" class="page-content active">
            <div class="dashboard-header">
                <h1 class="dashboard-title">订单管理</h1>
                <button id="add-order-btn" class="btn glass" style="background: rgba(67, 97, 238, 0.1);">
                    <i class="fas fa-plus"></i> 添加订单
                </button>
            </div>
            
            <div class="stats-container">
                <div class="stat-card glass">
                    <div class="stat-label">总订单数</div>
                    <div class="stat-value">128</div>
                    <div class="stat-trend"><i class="fas fa-arrow-up"></i> 12% 增长</div>
                </div>
                <div class="stat-card glass">
                    <div class="stat-label">待处理</div>
                    <div class="stat-value">24</div>
                    <div class="stat-trend"><i class="fas fa-exclamation-circle"></i> 需要处理</div>
                </div>
                <div class="stat-card glass">
                    <div class="stat-label">本月收入</div>
                    <div class="stat-value">¥68,420</div>
                    <div class="stat-trend"><i class="fas fa-arrow-up"></i> 8.5% 增长</div>
                </div>
                <div class="stat-card glass">
                    <div class="stat-label">平均客单价</div>
                    <div class="stat-value">¥2,380</div>
                    <div class="stat-trend"><i class="fas fa-arrow-up"></i> 5.2% 增长</div>
                </div>
            </div>
            
            <div class="table-container glass">
                <table>
                    <thead>
                        <tr>
                            <th>订单号</th>
                            <th>客户</th>
                            <th>金额</th>
                            <th>状态</th>
                            <th>下单时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>#ORD20230704123</td>
                            <td>张先生</td>
                            <td>¥2,450</td>
                            <td><span class="status-badge status-pending">待付款</span></td>
                            <td>2023-07-04 10:23</td>
                            <td><button class="action-btn view-order-btn" data-id="1">查看</button></td>
                        </tr>
                        <tr>
                            <td>#ORD20230704124</td>
                            <td>李女士</td>
                            <td>¥3,780</td>
                            <td><span class="status-badge status-completed">已完成</span></td>
                            <td>2023-07-04 09:15</td>
                            <td><button class="action-btn view-order-btn" data-id="2">查看</button></td>
                        </tr>
                        <tr>
                            <td>#ORD20230704125</td>
                            <td>王先生</td>
                            <td>¥1,520</td>
                            <td><span class="status-badge status-shipped">已发货</span></td>
                            <td>2023-07-03 16:45</td>
                            <td><button class="action-btn view-order-btn" data-id="3">查看</button></td>
                        </tr>
                        <tr>
                            <td>#ORD20230704126</td>
                            <td>赵小姐</td>
                            <td>¥4,200</td>
                            <td><span class="status-badge status-cancelled">已取消</span></td>
                            <td>2023-07-03 14:30</td>
                            <td><button class="action-btn view-order-btn" data-id="4">查看</button></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 商品管理页面 -->
        <div id="products-page" class="page-content">
            <div class="dashboard-header">
                <h1 class="dashboard-title">商品管理</h1>
                <a href="#add-product-page" class="btn glass" style="background: rgba(67, 97, 238, 0.1); text-decoration: none; color: inherit;">
                    <i class="fas fa-plus"></i> 添加商品
                </a>
            </div>
            
            <div class="table-container glass">
                <div class="product-grid">
                    <div class="product-card view-product-btn" data-id="1">
                        <div class="product-image">
                            <img src="https://images.unsplash.com/photo-1555041469-a586c61ea9bc?w=1000" alt="沙发">
                        </div>
                        <div class="product-info">
                            <h3 class="product-name">北欧简约布艺沙发</h3>
                            <div class="product-price">¥2,450</div>
                            <div class="product-stock">库存: 12件</div>
                        </div>
                    </div>
                    <div class="product-card view-product-btn" data-id="2">
                        <div class="product-image">
                            <img src="https://images.unsplash.com/photo-1503602642458-232111445657?w=1000" alt="餐桌">
                        </div>
                        <div class="product-info">
                            <h3 class="product-name">现代简约实木餐桌</h3>
                            <div class="product-price">¥1,680</div>
                            <div class="product-stock">库存: 8件</div>
                        </div>
                    </div>
                    <div class="product-card view-product-btn" data-id="3">
                        <div class="product-image">
                            <img src="https://images.unsplash.com/photo-1493663284031-b7e3aefcae8e?w=1000" alt="床">
                        </div>
                        <div class="product-info">
                            <h3 class="product-name">舒适记忆棉双人床</h3>
                            <div class="product-price">¥3,200</div>
                            <div class="product-stock">库存: 5件</div>
                        </div>
                    </div>
                    <div class="product-card view-product-btn" data-id="4">
                        <div class="product-image">
                            <img src="https://images.unsplash.com/photo-1524758631624-e2822e304c36?w=1000" alt="椅子">
                        </div>
                        <div class="product-info">
                            <h3 class="product-name">人体工学办公椅</h3>
                            <div class="product-price">¥980</div>
                            <div class="product-stock">库存: 15件</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 添加商品页面 -->
        <div id="add-product-page" class="page-content">
            <div class="dashboard-header">
                <button id="back-to-products" class="btn glass" style="background: rgba(67, 97, 238, 0.1);">
                    <i class="fas fa-arrow-left"></i> 返回商品管理
                </button>
                <h1 class="dashboard-title">添加新商品</h1>
                <div style="width: 150px;"></div>
            </div>
            
            <div class="table-container glass" style="padding: 2.5rem;">
                <form id="product-form">
                    <div class="form-group">
                        <label for="product-name">商品名称 *</label>
                        <input type="text" id="product-name" class="form-control" placeholder="请输入商品名称">
                        <div class="error-message" id="name-error">商品名称不能为空</div>
                    </div>
                    
                    <div style="display: flex; gap: 1.5rem; margin-bottom: 1.5rem;">
                        <div style="flex: 1;">
                            <div class="form-group">
                                <label for="product-price">商品价格 (¥) *</label>
                                <input type="number" id="product-price" class="form-control" placeholder="请输入商品价格" min="0" step="0.01">
                                <div class="error-message" id="price-error">价格不能为负数</div>
                            </div>
                        </div>
                        
                        <div style="flex: 1;">
                            <div class="form-group">
                                <label for="product-stock">库存数量 *</label>
                                <input type="number" id="product-stock" class="form-control" placeholder="请输入库存数量" min="0">
                                <div class="error-message" id="stock-error">库存数量不能为负数</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="product-category">商品分类 *</label>
                        <select id="product-category" class="form-control">
                            <option value="">请选择分类</option>
                            <option value="sofa">沙发</option>
                            <option value="table">餐桌</option>
                            <option value="bed">床具</option>
                            <option value="chair">椅子</option>
                            <option value="lighting">灯具</option>
                            <option value="cabinet">柜类</option>
                            <option value="other">其他</option>
                        </select>
                        <div class="error-message" id="category-error">请选择商品分类</div>
                    </div>
                    
                    <div class="form-group">
                        <label for="product-description">商品描述 *</label>
                        <textarea id="product-description" class="form-control" placeholder="请输入商品详细描述" rows="4"></textarea>
                        <div class="error-message" id="description-error">商品描述不能为空</div>
                    </div>
                    
                    <div class="form-group">
                        <label>商品图片 *</label>
                        <div class="image-upload-container">
                            <i class="fas fa-cloud-upload-alt"></i>
                            <p>点击或拖拽图片到此处上传</p>
                            <small>支持 JPG, PNG 格式，最大5MB</small>
                            <input type="file" id="file-input" accept="image/*">
                            <img id="image-preview" alt="图片预览">
                        </div>
                        <div class="error-message" id="image-error">请上传商品图片</div>
                    </div>
                    
                    <button type="submit" class="btn-submit">添加商品</button>
                </form>
            </div>
        </div>
    </main>

    <!-- 添加订单模态框 -->
    <div id="add-order-modal" class="modal">
        <div class="modal-content">
            <span class="close-modal">&times;</span>
            <h2 class="modal-title">添加新订单</h2>
            
            <form id="order-form">
                <div class="form-group">
                    <label for="customer-name">客户姓名 *</label>
                    <input type="text" id="customer-name" class="form-control" placeholder="请输入客户姓名">
                    <div class="error-message" id="customer-name-error">客户姓名不能为空</div>
                </div>
                
                <div class="form-group">
                    <label for="customer-phone">联系电话 *</label>
                    <input type="tel" id="customer-phone" class="form-control" placeholder="请输入联系电话">
                    <div class="error-message" id="phone-error">请输入有效的电话号码</div>
                </div>
                
                <div class="form-group">
                    <label for="order-amount">订单金额 (¥) *</label>
                    <input type="number" id="order-amount" class="form-control" placeholder="请输入订单金额" min="0" step="0.01">
                    <div class="error-message" id="amount-error">金额不能为负数</div>
                </div>
                
                <div class="form-group">
                    <label for="order-items">商品清单 *</label>
                    <select id="order-items" class="form-control" multiple style="height: 150px;">
                        <option value="1">北欧简约布艺沙发 - ¥2,450</option>
                        <option value="2">现代简约实木餐桌 - ¥1,680</option>
                        <option value="3">舒适记忆棉双人床 - ¥3,200</option>
                        <option value="4">人体工学办公椅 - ¥980</option>
                        <option value="5">现代简约吊灯 - ¥650</option>
                        <option value="6">实木组合书柜 - ¥3,500</option>
                    </select>
                    <small style="display: block; margin-top: 5px; color: var(--text-light);">按住Ctrl键多选商品</small>
                    <div class="error-message" id="items-error">请至少选择一个商品</div>
                </div>
                
                <div class="form-group">
                    <label for="order-status">订单状态 *</label>
                    <select id="order-status" class="form-control">
                        <option value="">请选择状态</option>
                        <option value="pending">待付款</option>
                        <option value="processing">处理中</option>
                        <option value="shipped">已发货</option>
                        <option value="completed">已完成</option>
                    </select>
                    <div class="error-message" id="status-error">请选择订单状态</div>
                </div>
                
                <div class="form-group">
                    <label for="order-notes">备注信息</label>
                    <textarea id="order-notes" class="form-control" rows="3" placeholder="请输入订单备注信息"></textarea>
                </div>
                
                <button type="submit" class="btn-submit">创建订单</button>
            </form>
        </div>
    </div>

    <!-- 商品详情模态框 -->
    <div id="product-detail-modal" class="modal">
        <div class="modal-content">
            <span class="close-modal">&times;</span>
            <div class="preview-container">
                <div class="preview-image">
                    <img id="detail-image" src="" alt="商品图片">
                </div>
                <div class="preview-details">
                    <h2 class="preview-title" id="detail-title"></h2>
                    <div class="preview-price" id="detail-price"></div>
                    
                    <div class="preview-meta">
                        <div class="preview-meta-item">
                            <span class="preview-label">库存</span>
                            <span class="preview-value" id="detail-stock"></span>
                        </div>
                        <div class="preview-meta-item">
                            <span class="preview-label">分类</span>
                            <span class="preview-value" id="detail-category"></span>
                        </div>
                        <div class="preview-meta-item">
                            <span class="preview-label">销量</span>
                            <span class="preview-value" id="detail-sales"></span>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label>商品描述</label>
                        <p class="preview-description" id="detail-description"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 订单详情模态框 -->
    <div id="order-detail-modal" class="modal">
        <div class="modal-content">
            <span class="close-modal">&times;</span>
            <h2 class="modal-title">订单详情</h2>
            
            <div class="form-group">
                <label>订单号</label>
                <div class="form-control" style="background: #f8f9fa;" id="detail-order-id"></div>
            </div>
            
            <div style="display: flex; gap: 1.5rem; margin-bottom: 1.5rem;">
                <div style="flex: 1;">
                    <div class="form-group">
                        <label>客户姓名</label>
                        <div class="form-control" style="background: #f8f9fa;" id="detail-customer-name"></div>
                    </div>
                </div>
                
                <div style="flex: 1;">
                    <div class="form-group">
                        <label>联系电话</label>
                        <div class="form-control" style="background: #f8f9fa;" id="detail-customer-phone"></div>
                    </div>
                </div>
            </div>
            
            <div class="form-group">
                <label>订单金额</label>
                <div class="form-control" style="background: #f8f9fa; font-size: 1.2rem; font-weight: 700;" id="detail-order-amount"></div>
            </div>
            
            <div class="form-group">
                <label>订单状态</label>
                <div class="form-control" style="background: #f8f9fa;" id="detail-order-status"></div>
            </div>
            
            <div class="form-group">
                <label>下单时间</label>
                <div class="form-control" style="background: #f8f9fa;" id="detail-order-time"></div>
            </div>
            
            <div class="form-group">
                <label>商品清单</label>
                <ul id="detail-order-items" style="list-style: none; padding: 0; border: 1px solid #ddd; border-radius: 10px; padding: 1rem; max-height: 200px; overflow-y: auto;">
                    <!-- 商品列表会动态添加到这里 -->
                </ul>
            </div>
            
            <div class="form-group">
                <label>备注信息</label>
                <div class="form-control" style="background: #f8f9fa; min-height: 80px;" id="detail-order-notes"></div>
            </div>
        </div>
    </div>

    <footer>
        <p>© 2023 灵犀智苑 · 商家中心 | 提供专业的店铺管理服务</p>
    </footer>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // 页面切换功能
            const navLinks = document.querySelectorAll('.nav-links a');
            const pageContents = document.querySelectorAll('.page-content');
            
            navLinks.forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    // 更新导航激活状态
                    navLinks.forEach(l => l.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 显示对应页面内容
                    const targetPage = this.getAttribute('data-page');
                    pageContents.forEach(page => {
                        page.classList.remove('active');
                        if (page.id === targetPage) {
                            page.classList.add('active');
                        }
                    });
                });
            });
            
            // 模态框控制
            const modals = document.querySelectorAll('.modal');
            const closeButtons = document.querySelectorAll('.close-modal');
            
            // 关闭模态框函数
            function closeAllModals() {
                modals.forEach(modal => modal.classList.remove('active'));
            }
            
            // 关闭按钮事件
            closeButtons.forEach(btn => {
                btn.addEventListener('click', closeAllModals);
            });
            
            // 点击模态框外部关闭
            window.addEventListener('click', (e) => {
                if (e.target.classList.contains('modal')) {
                    closeAllModals();
                }
            });
            
            // 添加订单模态框控制
            const addOrderBtn = document.getElementById('add-order-btn');
            const orderModal = document.getElementById('add-order-modal');
            
            if (addOrderBtn) {
                addOrderBtn.addEventListener('click', () => {
                    orderModal.classList.add('active');
                });
            }
            
            // 商品预览功能
            const productCards = document.querySelectorAll('.view-product-btn');
            const productModal = document.getElementById('product-detail-modal');
            
            productCards.forEach(card => {
                card.addEventListener('click', function() {
                    const productId = this.getAttribute('data-id');
                    // 根据ID获取商品数据（这里使用模拟数据）
                    const products = {
                        1: {
                            name: '北欧简约布艺沙发',
                            price: '¥2,450',
                            stock: '12件',
                            category: '沙发',
                            sales: '28件',
                            description: '采用高品质布艺面料，搭配实木框架，坐感舒适，回弹性好。简约北欧设计风格，适合现代家居环境。',
                            image: 'https://images.unsplash.com/photo-1555041469-a586c61ea9bc?w=1000'
                        },
                        2: {
                            name: '现代简约实木餐桌',
                            price: '¥1,680',
                            stock: '8件',
                            category: '餐桌',
                            sales: '15件',
                            description: '精选北美进口橡木，环保油漆处理，桌面光滑平整。现代简约设计，搭配多种家居风格。',
                            image: 'https://images.unsplash.com/photo-1503602642458-232111445657?w=1000'
                        },
                        3: {
                            name: '舒适记忆棉双人床',
                            price: '¥3,200',
                            stock: '5件',
                            category: '床具',
                            sales: '12件',
                            description: '采用高密度记忆棉床垫，贴合人体曲线，提供舒适支撑。实木床架结构稳固，经久耐用。',
                            image: 'https://images.unsplash.com/photo-1493663284031-b7e3aefcae8e?w=1000'
                        },
                        4: {
                            name: '人体工学办公椅',
                            price: '¥980',
                            stock: '15件',
                            category: '椅子',
                            sales: '42件',
                            description: '符合人体工学设计，可调节座椅高度和靠背角度，网布面料透气舒适，适合长时间办公使用。',
                            image: 'https://images.unsplash.com/photo-1524758631624-e2822e304c36?w=1000'
                        }
                    };
                    
                    const product = products[productId];
                    
                    // 填充模态框内容
                    document.getElementById('detail-image').src = product.image;
                    document.getElementById('detail-title').textContent = product.name;
                    document.getElementById('detail-price').textContent = product.price;
                    document.getElementById('detail-stock').textContent = product.stock;
                    document.getElementById('detail-category').textContent = product.category;
                    document.getElementById('detail-sales').textContent = product.sales;
                    document.getElementById('detail-description').textContent = product.description;
                    
                    productModal.classList.add('active');
                });
            });
            
            // 订单查看功能
            const viewOrderBtns = document.querySelectorAll('.view-order-btn');
            const orderDetailModal = document.getElementById('order-detail-modal');
            
            viewOrderBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    const orderId = this.getAttribute('data-id');
                    // 根据ID获取订单数据（这里使用模拟数据）
                    const orders = {
                        1: {
                            id: '#ORD20230704123',
                            customer: '张先生',
                            amount: '¥2,450',
                            status: '待付款',
                            time: '2023-07-04 10:23',
                            items: ['北欧简约布艺沙发 × 1', '人体工学办公椅 × 2'],
                            phone: '13800138000',
                            notes: '需要周五下午送货，请提前电话联系。'
                        },
                        2: {
                            id: '#ORD20230704124',
                            customer: '李女士',
                            amount: '¥3,780',
                            status: '已完成',
                            time: '2023-07-04 09:15',
                            items: ['现代简约实木餐桌 × 1', '圆形玻璃茶几 × 1'],
                            phone: '13900139000',
                            notes: '已付款，请尽快安排发货。'
                        },
                        3: {
                            id: '#ORD20230704125',
                            customer: '王先生',
                            amount: '¥1,520',
                            status: '已发货',
                            time: '2023-07-03 16:45',
                            items: ['人体工学办公椅 × 1'],
                            phone: '13700137000',
                            notes: '发票请随货物一起寄送。'
                        },
                        4: {
                            id: '#ORD20230704126',
                            customer: '赵小姐',
                            amount: '¥4,200',
                            status: '已取消',
                            time: '2023-07-03 14:30',
                            items: ['舒适记忆棉双人床 × 1', '北欧简约布艺沙发 × 1'],
                            phone: '13600136000',
                            notes: '因尺寸不合适取消订单。'
                        }
                    };
                    
                    const order = orders[orderId];
                    
                    // 填充模态框内容
                    document.getElementById('detail-order-id').textContent = order.id;
                    document.getElementById('detail-customer-name').textContent = order.customer;
                    document.getElementById('detail-customer-phone').textContent = order.phone;
                    document.getElementById('detail-order-amount').textContent = order.amount;
                    document.getElementById('detail-order-status').textContent = order.status;
                    document.getElementById('detail-order-time').textContent = order.time;
                    document.getElementById('detail-order-notes').textContent = order.notes;
                    
                    // 填充商品清单
                    const itemsList = document.getElementById('detail-order-items');
                    itemsList.innerHTML = '';
                    order.items.forEach(item => {
                        const li = document.createElement('li');
                        li.textContent = item;
                        li.style.padding = '0.5rem 0';
                        li.style.borderBottom = '1px solid #eee';
                        itemsList.appendChild(li);
                    });
                    
                    orderDetailModal.classList.add('active');
                });
            });
            
            // 添加商品页面切换
            const addProductLink = document.querySelector('a[href="#add-product-page"]');
            const backToProductsBtn = document.getElementById('back-to-products');
            
            if (addProductLink) {
                addProductLink.addEventListener('click', function(e) {
                    e.preventDefault();
                    pageContents.forEach(page => page.classList.remove('active'));
                    document.getElementById('add-product-page').classList.add('active');
                    navLinks.forEach(link => link.classList.remove('active'));
                });
            }
            
            if (backToProductsBtn) {
                backToProductsBtn.addEventListener('click', function() {
                    pageContents.forEach(page => page.classList.remove('active'));
                    document.getElementById('products-page').classList.add('active');
                    navLinks[1].classList.add('active');
                });
            }
            
            // 图片上传功能
            const fileInput = document.getElementById('file-input');
            const imagePreview = document.getElementById('image-preview');
            
            if (fileInput) {
                fileInput.addEventListener('change', function() {
                    const file = this.files[0];
                    if (file) {
                        const reader = new FileReader();
                        reader.onload = function(e) {
                            imagePreview.src = e.target.result;
                            imagePreview.style.display = 'block';
                        }
                        reader.readAsDataURL(file);
                    }
                });
            }
            
            // 表单验证函数
            function validatePhone(phone) {
                const regex = /^1[3-9]\d{9}$/;
                return regex.test(phone);
            }
            
            // 订单表单提交
            const orderForm = document.getElementById('order-form');
            if (orderForm) {
                orderForm.addEventListener('submit', function(e) {
                    e.preventDefault();
                    let isValid = true;
                    
                    // 重置错误信息
                    document.querySelectorAll('#order-form .error-message').forEach(el => {
                        el.style.display = 'none';
                    });
                    
                    // 验证客户姓名
                    const customerName = document.getElementById('customer-name').value;
                    if (!customerName) {
                        document.getElementById('customer-name-error').style.display = 'block';
                        isValid = false;
                    }
                    
                    // 验证电话号码
                    const phone = document.getElementById('customer-phone').value;
                    if (!phone || !validatePhone(phone)) {
                        document.getElementById('phone-error').style.display = 'block';
                        isValid = false;
                    }
                    
                    // 验证订单金额
                    const amount = parseFloat(document.getElementById('order-amount').value);
                    if (isNaN(amount) || amount < 0) {
                        document.getElementById('amount-error').style.display = 'block';
                        isValid = false;
                    }
                    
                    // 验证商品清单
                    const items = document.getElementById('order-items');
                    if (items.selectedOptions.length === 0) {
                        document.getElementById('items-error').style.display = 'block';
                        isValid = false;
                    }
                    
                    // 验证订单状态
                    const status = document.getElementById('order-status').value;
                    if (!status) {
                        document.getElementById('status-error').style.display = 'block';
                        isValid = false;
                    }
                    
                    if (isValid) {
                        alert('订单创建成功！');
                        orderModal.classList.remove('active');
                        orderForm.reset();
                    }
                });
            }
            
            // 商品表单提交
            const productForm = document.getElementById('product-form');
            if (productForm) {
                productForm.addEventListener('submit', function(e) {
                    e.preventDefault();
                    let isValid = true;
                    
                    // 重置错误信息
                    document.querySelectorAll('#product-form .error-message').forEach(el => {
                        el.style.display = 'none';
                    });
                    
                    // 验证商品名称
                    const productName = document.getElementById('product-name').value;
                    if (!productName) {
                        document.getElementById('name-error').style.display = 'block';
                        isValid = false;
                    }
                    
                    // 验证商品价格
                    const price = parseFloat(document.getElementById('product-price').value);
                    if (isNaN(price)) {
                        document.getElementById('price-error').textContent = '请输入有效的价格';
                        document.getElementById('price-error').style.display = 'block';
                        isValid = false;
                    } else if (price < 0) {
                        document.getElementById('price-error').textContent = '价格不能为负数';
                        document.getElementById('price-error').style.display = 'block';
                        isValid = false;
                    }
                    
                    // 验证库存数量
                    const stock = parseInt(document.getElementById('product-stock').value);
                    if (isNaN(stock)) {
                        document.getElementById('stock-error').textContent = '请输入有效的库存数量';
                        document.getElementById('stock-error').style.display = 'block';
                        isValid = false;
                    } else if (stock < 0) {
                        document.getElementById('stock-error').textContent = '库存数量不能为负数';
                        document.getElementById('stock-error').style.display = 'block';
                        isValid = false;
                    }
                    
                    // 验证分类
                    const category = document.getElementById('product-category').value;
                    if (!category) {
                        document.getElementById('category-error').style.display = 'block';
                        isValid = false;
                    }
                    
                    // 验证描述
                    const description = document.getElementById('product-description').value;
                    if (!description) {
                        document.getElementById('description-error').style.display = 'block';
                        isValid = false;
                    }
                    
                    // 验证图片
                    const hasImage = document.getElementById('image-preview').style.display === 'block';
                    if (!hasImage) {
                        document.getElementById('image-error').style.display = 'block';
                        isValid = false;
                    }
                    
                    if (isValid) {
                        alert('商品添加成功！');
                        productForm.reset();
                        imagePreview.style.display = 'none';
                        
                        // 返回商品管理页面
                        pageContents.forEach(page => page.classList.remove('active'));
                        document.getElementById('products-page').classList.add('active');
                        navLinks[1].classList.add('active');
                    }
                });
            }
            
            // 卡片悬停效果
            const cards = document.querySelectorAll('.product-card');
            cards.forEach(card => {
                card.addEventListener('mousemove', (e) => {
                    const rect = card.getBoundingClientRect();
                    const x = e.clientX - rect.left;
                    const y = e.clientY - rect.top;
                    
                    const centerX = rect.width / 2;
                    const centerY = rect.height / 2;
                    
                    const angleY = (x - centerX) / 25;
                    const angleX = (centerY - y) / 25;
                    
                    card.style.transform = `perspective(1000px) rotateX(${angleX}deg) rotateY(${angleY}deg) scale(1.05)`;
                });
                
                card.addEventListener('mouseleave', () => {
                    card.style.transform = '';
                });
            });
        });
    </script>
</body>
</html>merchant